<script setup lang="ts">
const menus = ref([
  { title: "人才发展", route: "/join?menu=0#rcfz" },
  { title: "选择中瑞", route: "/join?menu=1#xzzr" },
  { title: "招聘流程", route: "/join?menu=2#zplc" },
  { title: "员工福利", route: "/join?menu=3#ygfl" },
  { title: "办公环境", route: "/join?menu=4#bghj" },
  { title: "员工活动", route: "/join?menu=5#yghd" },
  { title: "加入我们", route: "/join?menu=6#jrwm" },
]);
const menuIndex = ref(0);
const route = useRoute();
const router = useRouter();
watch(
  () => route.query,
  (query) => {
    if (query.menu) menuIndex.value = +query.menu;
  },
  { immediate: true }
);

function handleClickMenu(route: string) {
  router.push(route);
}
</script>

<template>
  <div class="join">
    <img
      class="banner"
      src="https://public-oss-file.zmaxfilm.com/website-compress/join-2.png"
      alt="关于我们"
    />
    <div class="menu">
      <div class="content">
        <div
          v-for="(menu, index) in menus"
          :key="index"
          class="menu-item"
          :class="{ 'menu-item--active': menuIndex === index }"
          @click="handleClickMenu(menu.route)"
        >
          {{ menu.title }}
        </div>
      </div>
    </div>
    <div class="main">
      <JoinRenCaiFaZhan />
      <JoinXuanZheZhongRui />
      <JoinZhaoPinLiuCheng />
      <JoinYuanGongFuLi />
      <JoinBanGongHuanJing />
      <JoinYuanGongHuoDong />
      <JoinJiaRuWoMen />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.join {
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 600px;
  }

  .menu {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    background-color: #fafafa;

    .content {
      gap: 50px;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      .menu-item {
        height: 100%;
        display: flex;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        position: relative;
        align-items: center;

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          width: 100%;
          height: 2px;
          bottom: 0;
          transform-origin: center;
          background-color: var(--theme-color);
          transform: translateX(-50%) scaleX(0);
          transition: transform 0.4s ease;
        }

        &:hover::after,
        &.menu-item--active::after {
          transform: translateX(-50%) scaleX(1);
        }
      }
    }
  }

  .main {
    display: flex;
    flex-direction: column;
  }
}
</style>
